<template>
  <div class="shrink-box no-drag">
    <a-layout class="h-full">
      <a-layout-header class="h-12n flex flex-a-c box-border">
        <div class="bgfff round-4 overflower-hidden w-full flex">
          <a-tabs hide-content :active-key="selectedKey" @change="onTabChange">
            <a-tab-pane :key="1">
              <template #title>
                <div class="flex flex-a-c">
                  <span class="text-size-18 ml-6 font-bold px-14"
                    >官方源头群<span v-if="officialGroupList"
                      >（{{ officialGroupList.length }}）</span
                    ></span
                  >
                </div>
              </template>
            </a-tab-pane>
            <a-tab-pane :key="2">
              <template #title>
                <div class="flex flex-a-c">
                  <span class="text-size-18 ml-6 font-bold px-14"
                    >我的源头群<span v-if="personalGroupList"
                      >（{{ personalGroupList.length }}）</span
                    ></span
                  >
                </div>
              </template>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-layout-header>
      <a-layout-content>
        <section class="content flex-1 h-full overflow-hidden box-border pt-14 round-4">
          <transition name="fade-slide" mode="out-in" appear>
            <keep-alive>
              <component
                :is="menuList[selectedKey - 1].value"
                :personalGroupList="personalGroupList"
                :officialGroupList="officialGroupList"
                @getOfficialGroupList="getOfficialGroupList"
                @getPersonalGroupList="getPersonalGroupList"
              ></component>
            </keep-alive>
          </transition>
        </section>
      </a-layout-content>
    </a-layout>
  </div>
</template>

<script setup>
import OfficialGroup from './officialGroup.vue'
import PersonalGroup from './personalGroup.vue'
import { Message } from '@arco-design/web-vue'
import $bus from '@renderer/common/js/bus'
const { ipcRenderer } = window.electron
const selectedKey = ref(1)
const personalGroupList = ref([])
const officialGroupList = ref([])
let showMsg = false
const menuList = [
  { name: '官方源头群', value: OfficialGroup },
  { name: '我的源头群', value: PersonalGroup }
]

// 监听群列表消息
ipcRenderer.on('recvWxGroupList', async (event, message) => {
  personalGroupList.value = JSON.parse(JSON.stringify(message))
  if (showMsg) {
    showMsg = false
    Message.success('已刷新')
  }
})

// 监听WebSocket消息
ipcRenderer.on('webSocketMessage', async (event, res) => {
  if (res?.data?.wsMsgType) {
    switch (res?.data?.wsMsgType) {
      case 'getSourceChatroom':
        if (res.code == 200) {
          const list = res.data?.list ?? []
          officialGroupList.value = list
          if (showMsg) {
            showMsg = false
            Message.success('已刷新')
          }
        } else {
          Message.error(res.message)
        }
        break
    }
  }
})

// 获取官方群列表
const getOfficialGroupList = (flag) => {
  showMsg = flag
  ipcRenderer.send('sendToWebSocket', { wsMsgType: 'getSourceChatroom' })
}

// 获取我的群列表
const getPersonalGroupList = (flag) => {
  showMsg = flag
  ipcRenderer.send('getWxGroupList')
}

const onTabChange = async (e) => {
  selectedKey.value = e
}

onMounted(async () => {
  getOfficialGroupList(false)
  getPersonalGroupList(false)
  $bus.on('getWxGroupList', () => {
    ipcRenderer.send('getWxGroupList')
  })
})

onUnmounted(() => {
  $bus.off('getWxGroupList')
})
</script>
<style scope lang="scss">
.shrink-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid #eee;
  box-sizing: border-box;
  padding: 10px;
  background: #ececec;
}
</style>
